import React, { useEffect, useState } from 'react'
import style from './style.module.scss'
import $ from 'jquery'
import { CloseOutlined, SearchOutlined } from '@ant-design/icons'
import { Simulate } from 'react-dom/test-utils'

interface ISearchViewProps {
    width: string
    height: string
    searchWidth: string
    clearWidth: string
    borderRadius: string
    placeHolder?: string
    searchValue?: string
}

export default function SearchView(props: ISearchViewProps) {
    const [value, setValue] = useState(props.searchValue?.replace(/[-]+/g, ' ') || '')

    useEffect(() => {
        setValue(props.searchValue?.replace(/\s+/g, ' ') || '')
    }, [props.searchValue])

    return (
        <div
            className={style.container}
            style={{
                ['--width' as any]: props.width,
                ['--height' as any]: props.height,
                ['--search-width' as any]: props.searchWidth,
                ['--clear-width' as any]: props.clearWidth,
                ['--border-radius' as any]: props.borderRadius
            }}>
            <div className={style.search__icon}>
                <SearchOutlined />
            </div>
            <input
                className={style.input}
                value={value}
                placeholder={props.placeHolder}
                onChange={e => {
                    setValue(e.target.value)
                }}
                onKeyPress={e => {
                    if (e.key == 'Enter') {
                        window.location.pathname = '/search/photos/' + value.replace(/\s+/g, '-')
                    }
                }}
            />
            <div className={style.clear__icon}>
                <CloseOutlined
                    onClick={() => {
                        setValue('')
                    }}
                />
            </div>
        </div>
    )
}
